<template>
	<view class="user-page">
		<div class="user-page-top">
			<div class="user-box" v-if="islogin">
				<div class="user-img" @click="onClickAvatar()" @chooseavatar="onChooseAvatar">
					<image :src="info.avater || '/static/images/bj.png'" mode="aspectFill"></image>
				</div>
				<div class="user-cont">
					<!--  -->
					<div class="user-name" v-if="info.is_staff == 0">
						{{info.real_name || '--'}} <span class="user-type" style="margin-left: 10rpx;"
							v-if="info.grade_id > 0">({{info.grade.name}})</span>
					</div>
					<div class="user-name" v-if="info.is_staff == 1">
						{{info.real_name || '--'}} <span class="user-type" style="margin-left: 10rpx;">({{info.company_name}} / 员工)</span>
					</div>
					<div class="user-account">
						{{info.mobile}}
					</div>
				</div>
			</div>
			<div class="user-box" v-if="!islogin">
				<div class="user-img">
					<image src="@/static/images/bj.png" mode="aspectFill"></image>
				</div>
				<div class="user-cont">
					<button class="nobutton" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" @click="clickPhoneNumber">登录/注册</button>
				</div>
			</div>
		</div>
		<div class="my-nav-box">
 			<div class="my-nav-item" @click="gotoinfo()">
				<div class="nav-cont">
					<i class="Ticonfont Ticon-yuangongguanli"></i>
					<span>个人资料 </span>
				</div>
				<i class="Ticonfont Ticon-jiantou"></i>
			</div>
			<div class="my-nav-item" @click="gotopersonal()" v-if="info.is_staff == 0">
				<div class="nav-cont">
					<i class="Ticonfont Ticon-zhenshixingming"></i>
					<span>资料管理 <span class="user-type" v-if="info.status == 1">(去认证)</span> <span class="user-type"
							v-if="info.status == 2">(审核中)</span></span>
				</div>
				<i class="Ticonfont Ticon-jiantou"></i>
			</div>
			<div class="my-nav-item" @click="goto('/pages/my/my-finance')">
				<div class="nav-cont">
					<i class="Ticonfont Ticon-caiwu"></i>
					<span>财务管理</span>
				</div>
				<i class="Ticonfont Ticon-jiantou"></i>
			</div>
 			<div class="my-nav-item" @click="goto('/pages/my/staff')" v-if="info.is_staff == 0 && info.status == 3">
				<div class="nav-cont">
					<i class="Ticonfont Ticon-yonghu"></i>
					<span>员工管理</span>
				</div>
				<i class="Ticonfont Ticon-jiantou"></i>
			</div>
			<div class="my-nav-item" @click="goto('/pages/my/my-issued')" v-if="todos">
				<div class="nav-cont">
					<i class="Ticonfont Ticon-fabu"></i>
					<span>我的发布</span>
				</div>
				<i class="Ticonfont Ticon-jiantou"></i>
			</div>
		</div>

		<FootTabbar :currentIndex='4' />
	</view>
</template>

<script>
	import FootTabbar from '@/components/foot-tabbar/foot-tabbar.vue'
	import $store from '@/store/index.js';
	export default {
		components: {
			FootTabbar
		},
		data() {
			return {
				info: {},
				avater:"/static/images/bj.png",
				code:"",
				islogin: false
			}
		},

		onShow() {
			this.getdata();
		},
		computed: {
			todos() {
				return this.$store.state.isAdd
			}
		},
		methods: {
			// 点击头像按钮事件
			onClickAvatar() {
				this.chooseImage()
			},
			
			// 选择头像事件 - 仅限微信小程序
			onChooseAvatar({
				detail
			}) {
				// #ifdef MP-WEIXIN
				const app = this
				app.avatarUrl = detail.avatarUrl
				app.tempFile = {
					path: app.avatarUrl
				}
				// #endif
			},
			
			// 选择图片
			chooseImage() {
				const app = this
				// 选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://scny.nclavi.com/api/upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								"Access-Token": uni.getStorageSync('token'),
								"storeId": 10001,
								"platform": "h5"
							},
							formData: {
								user: 'test'
							},
							success: (res) => {
								let info = JSON.parse(res.data);
								
								if (info.status == 200) {		
									app.$H.post('/user/up_avatar',{
										form: {
											avater : info.data.fileInfo.external_url
										}
									}).then(res => {
										
									})
									
									app.info.avater = info.data.fileInfo.external_url;
								}
							}
						});
					}
				});
			},
			
			async clickPhoneNumber() {
				this.code = await this.getCode()
			},
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log('code', res.code)
							resolve(res.code)
						},
						fail: reject
					})
				})
			},
			getPhoneNumber(e) {
				this.$H.post('/passport/loginMpWxMobile', {form:{
					code: this.code,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					isParty:false,
					partyData:"-",
					refereeId:10001
				}}).then(res => {
					if (res.status == 500) {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
					if (res.status == 200) {
						uni.showToast({
							icon: "success",
							title: res.message
						})
						
						uni.setStorageSync('token', res.data.token);	
					
						this.getdata();
					}
				}).catch(err => {
					// 登录失败
					this.loading = false
				})
			},
			getdata() {
				this.$H.get('/user/info').then(res => {
					if (res.status == 200) {
						this.info = res.data.userInfo
						this.islogin = true;
					}
				})
			},
			gotoinfo(){
				if (this.islogin == false) {
					uni.showToast({
						icon: "none",
						title: '请先登录'
					})
					return;
				}
				
				uni.navigateTo({
					url: '/pages/my/infos'
				})
			},
			// 跳转个人资料
			gotopersonal() {
				if (this.islogin == false) {
					uni.showToast({
						icon: "none",
						title: '请先登录'
					})
					return;
				}
				if (this.info.status == 1) {
					uni.navigateTo({
						url: '/pages/my/my-user-perfection'
					})
				} else if (this.info.status == 2) {
					/* uni.showToast({
						icon: "none",
						title: '审核中请稍后再试'
					})
					return; */
					uni.navigateTo({
						url: '/pages/my/my-user-perfection'
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/my-user-perinfo'
					})
				}
			},
			// 跳转页面
			goto(url) {
				if (this.islogin == false) {
					uni.showToast({
						icon: "none",
						title: '请先登录'
					})
					return;
				}
				if (url == '/pages/my/my-finance') {
					if (this.info.status != 3) {
						uni.showToast({
							icon: "none",
							title: '请先完成实名认证'
						})
						return;
					}
				}

				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.user-page {
		height: 100%;
		background: #f5f5f5;
		// position: fixed;
		// top: 0px;
		// left: 0px;
		// width: 100%;
	}

	.nobutton {
		background: transparent;
		/* 去除背景色 */
		box-shadow: none;
		/* 无阴影 */
		outline: none;
		/* 无轮廓线 */
		color: inherit;
		/* 文字颜色继承父元素 */
		border: none;
		/* 去除边框 */
		padding: 0;
		/* 去除填充 */
		margin: 0;
		/* 去除边距 */
		font: inherit;
		/* 字体样式继承父元素 */
		border-style: none;
		&::after{
			border: 0px solid red;
		}
	}

	.user-page-top {
		height: 200rpx;
		background: rgba(23, 191, 139, 1);
		padding: 30rpx;
		box-sizing: border-box;

		.user-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid #fff;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.user-box {
		display: flex;
		align-items: center;
		color: #fff;

		.user-cont {
			margin-left: 20rpx;

			.user-name {
				font-weight: bold;
				margin-bottom: 10rpx;

			}
		}
	}

	.user-type {
		font-weight: normal;
		font-size: 12px;

	}

	.my-nav-box {
		width: 690rpx;
		background: #fff;
		margin: 20rpx auto;
		padding: 0px 20rpx;

		.my-nav-item {
			border-bottom: 1px solid #f1f1f1;
			display: flex;
			justify-content: space-between;
			height: 90rpx;
			align-items: center;

			.Ticonfont {
				color: rgba(23, 191, 139, 1);
				margin-right: 10rpx;
				font-size: 36rpx;
				display: inline-block;
			}

		}

	}
</style>